<template>
  <div>
    <div class="box">
      <div class="systemBox w-[120px] leading-[40px] min-w-[120px]">操作</div>
      <div class="systemBox w-[600px] leading-[40px]">功能说明</div>
    </div>
    <div class="box mt-[-1px]">
      <div class="systemBox w-[120px] leading-[50px] relative min-w-[120px]">
        <div class="detectBtn bg-[#409eff] w-[92px]" @click="restart">重启</div>
      </div>
      <div class="systemBox w-[600px] leading-[50px]">重新启动系统</div>
    </div>
    <div class="box mt-[-1px]">
      <div class="systemBox w-[120px] leading-[50px] relative min-w-[120px]">
        <div
          class="detectBtn bg-[#409eff] w-[92px] flex justify-center items-center"
        >
          <IconifyIconOffline :icon="uploadLine" width="14px" height="14px" />
          <div class="ml-[5px]">点击上传</div>
        </div>
      </div>
      <div class="systemBox w-[600px] leading-[50px]">
        上传升级包后升级,升级过程需耗时1-10分钟，请不要关闭电源，升级完成后设备将重启
      </div>
      <div class="text-sm leading-[50px] ml-[10px]">
        当前版本：{{ version }}
      </div>
    </div>
    <div class="box mt-[-1px]">
      <div class="systemBox w-[120px] leading-[50px] relative min-w-[120px]">
        <div
          class="detectBtn bg-[#409eff] w-[92px] flex justify-center items-center"
        >
          <IconifyIconOffline :icon="uploadLine" width="14px" height="14px" />
          <div class="ml-[5px]">点击上传</div>
        </div>
      </div>
      <div class="systemBox w-[600px] leading-[50px]">离线上传授权文件</div>
    </div>
    <div class="box mt-[-1px]">
      <div class="systemBox w-[120px] leading-[50px] relative min-w-[120px]">
        <div class="detectBtn bg-[#409eff] w-[92px]">获取授权</div>
      </div>
      <div class="systemBox w-[600px] leading-[50px]">在线获取授权文件</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import uploadLine from "@iconify-icons/ri/upload-line";
import { getVersionData, restartSystem } from "@/api/system";
import { ref, onMounted } from "vue";
const version = ref<string>("");
const getData = async () => {
  const res = await getVersionData();
  version.value = res.result.version;
};
const restart = async () => {
  const res = await restartSystem();
  console.log(res);
};
onMounted(() => {
  getData();
});
</script>
<style scoped lang="scss">
.detectBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 30px;
  margin: 0 auto;
  line-height: 30px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.box {
  display: flex;
  border: 1px solid #e4e7ed;
}

.systemBox {
  padding: 0 10px;
  font-size: 14px;
  border-right: 1px solid #e4e7ed;
}
</style>
